<template>
<div>
  <el-divider content-position="center">设置主页商品</el-divider>
  <el-table
      :data="tableData.filter(data => !search || data.fname.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      :default-sort="{prop: 'date', order: 'descending'}"
  >
    <el-table-column
        prop="date"
        label="生产日期"
        sortable
        width="180">
    </el-table-column>
    <el-table-column
        prop="fdate"
        label="保质期/天"
        sortable
        width="150">
    </el-table-column>
    <el-table-column
        prop="fname"
        label="名称"
        width="150">
    </el-table-column>
    <el-table-column
        prop="address"
        label="图片">
      <template slot-scope="{row}">
        <el-image
            style="width: 50px; height: 50px"
            :src="row.fimg"
            fit="fill"></el-image>
      </template>
    </el-table-column>
    <el-table-column
        prop="type"
        label="类别"
        width="150"
        :filters="typeList"
        :filter-method="filterTag"
        filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.ftype === '1' ? 'success' : 'warning'"
            disable-transitions>{{ scope.row.ftype === '1' ? '素食' : '饮品' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="fnum"
        label="数量/件"
        sortable
        width="180">
    </el-table-column>
    <el-table-column
        prop="frecommendStatus"
        label="商品是否展示">
      <template slot-scope="scope">
        <el-tag
            :type="scope.row.frecommendStatus === '0' ? 'success' : 'danger'"
            disable-transitions>{{scope.row.frecommendStatus === '0' ? '展示中' : '未展示'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        align="right">
      <template slot="header" slot-scope="scope">
        <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-tooltip class="item" effect="dark" content="展示" placement="top-start">
          <el-button @click="updateProduct(scope.row)" type="primary" icon="el-icon-star-on" circle></el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
  name: "SettingIndexPicture",
  data(){
    return{
      tableData: [],
      typeList: [],
      search:''
    }
  },
  methods:{
    filterTag(value, row) {
      return row.ftype === value;
    },
    updateProduct(row){
      console.log(row)
      axios({
        method:'get',
        url:`http://localhost:8081/foodRecommend/insertRecommend/${row.fid}/${row.frecommendStatus}`
      }).then(res=>{
        if (res.data.code === 0){
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
          setInterval(function (){
            location.href = '/settingIndexPicture'
          },1000)

        }else{
          this.$message.error(res.data.msg);
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  },
  mounted() {
    axios({
      method: 'get',
      url: 'http://localhost:8081/boss/getFoodList'
    }).then(res => {
      this.tableData = res.data.data
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
    axios({
      method: 'get',
      url: 'http://localhost:8081/common/getType'
    }).then(res => {
      this.typeList = res.data.data
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped>

</style>
